<template>
	<view>
		<view class="address-container">
			<view class="address-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="backPerson()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					地址管理
				</view>
			</view>
			<view class="address-content">
				<view class="address-box" v-for="(item, index) in addressList" :key="index">
					<view class="address-card">
						<view class="address-list">
							<view class="address-item">
								<view class="address-item-left-content">
									<view class="address-item-top-row">
										<view class="base-address">
											{{item.province}} {{item.city}}
											{{item.district}}
										</view>
									</view>
									<view class="address-item-mid-row">
										<view class="address-item-name">
											{{item.name}}
										</view>
										<view class="address-item-phone">
											{{item.phone}}
										</view>
									</view>
									<view class="address-item-bottom-row">
										<view class="address-item-info-text">
											详细地址：
										</view>
										<view class="address-item-info-detail">
											{{item.address}}
										</view>
									</view>
								</view>
								<view class="address-item-right-content">
									<view class="icon-box">
										<view class="del-box">
											<uni-icons class="icon-del" type="trash" size="24"
												@click="delAddr(item.id)"></uni-icons>
										</view>
										<view class="edit-box">
											<img class="icon-edit" src="/static/other-icon/edit.svg" alt=""
												@click="editAddr(item.id)" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="address-btn-box">
			<view class="address-btn" @click="createAddr()">
				新建地址
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onBeforeMount,
		onMounted,
		onUnmounted,
		watch,
		watchEffect,
		computed
	} from 'vue';
	import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';
	import {
		sharedState,
		updateState
	} from '@/common/store.js'
	/**
	 * 地址测试data
	 */
	let addressList =ref([]);
	
	let selectAddrId = ref(0);
	
	let userId = ref(0);
	//返回个人页面
	let backPerson = () => {
		uni.switchTab({
			url:"/pages/person/person"
		})
	}

	//跳转到创建地址页面
	let createAddr = () => {
		updateState(null);
		uni.navigateTo({
			url:"/pages/editaddress/editaddress"
		})

	}
	


	//通过id跳转到编辑地址页面
	let editAddr = (id) => {
		updateState(id);
		let editId = id;
		uni.navigateTo({
			url: "/pages/editaddress/editaddress?id=" + editId
		})
	}
	//通过id删除地址
	let delAddr = (id) =>  {
		const addrId = id;
		uni.showModal({
			title: '提示',
			content: '确定要删除此地址吗？',
			confirmText: '确定',
			cancelText: '取消',
			confirmColor: '#ff2d2de2',
			success: (res) => {
				if (res.confirm) {
					// 用户点击了确定，执行删除操作
					uni.request({
						url:`/st/addrDetail/del/${addrId}`,
						method:'DELETE',
						success: (res) => {
							console.log(res.data);
							getAddrList(userId.value);
						},
						fail: () => {
								
						}
					})
		
				} else if (res.cancel) {
					// 用户点击了取消，什么也不做
					console.log('用户点击了取消');
				}
			},
			fail: (err) => {
				console.error('模态对话框调用失败', err);
			}
		});
	}
	
	const testRqcode=()=>{
		uni.request({
			url: "/st/qrCode/generateTestQRCode",
			method: "GET",
			success: (res) => {
				console.log(res.data);
			},
			fail: () => {
		
			}
		})
	}
	
	const getAddrList= (userId)=>{
		uni.request({
			url: `/st/addrDetail/listByUserId/${userId}`,
			method: "GET",
			success: (res) => {
				console.log(res.data);
				if (res.data.code == 2000) {
					addressList.value = res.data.data;
				} else {
		
				}
			},
			fail: () => {
		
			}
		})
	}
	
	onBeforeMount(()=>{
		uni.getStorage({
			key: 'userLogin',
			success: function(res) {
				userId.value = res.data.id;
				
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
		getAddrList(userId.value);
		// testRqcode();
	})



	// onLoad(() => {
	// 	// clearStorage();
	// 	getSaveAddrStorage();

	// })

	const clearStorage = () => {
		uni.clearStorage({
			success: function() {
				console.log('本地存储已清除');
				msgType.value = 'success';
				messageText.value = '本地存储已清除';
				messageToggle('success');
				// 清除后重置相关数据
				spectatorList.value = [];
				formData.value = {
					spectatorName: "",
					spectatorIdCardType: "请选择证件类型",
					spectatorIdNumber: "",
					spectatorphone: ""
				};
			},
			fail: function(err) {
				console.error('清除本地存储失败', err);
				msgType.value = 'error';
				messageText.value = '清除本地存储失败';
				messageToggle('error');
			}
		});
	};
</script>

<style lang="scss" scoped>
	.address-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;
		color: #333;

		.address-header {
			top: 0px;
			width: 100%;
			height: 50px;
			display: flex;
			position: fixed;
			z-index: 1000;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 0px 4px 0px #d3d3d3;

			.title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}

			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;

			}
		}


		.address-content {
			width: 100%;
			height: auto;
			background: #f8f8fe;
			margin-top: 50px;
			float: left;
			padding: 0px 15px;
			box-sizing: border-box;

			.address-box {
				width: 100%;
				height: 110px;
				margin: 15px 0px;
				background: #fff;
				box-shadow: 0px 0px 6px 0px #ddd;
				border-radius: 5px;

				.address-item {
					width: 100%;
					height: 110px;
					box-sizing: border-box;
					padding: 10px 15px;

					.address-item-left-content {
						width: calc(100% - 30px);
						height: 100%;
						float: left;

						.address-item-top-row {
							width: auto;
							height: 30px;
							line-height: 30px;
							color: #999999;
							font-size: 12px;

							.base-address {
								width: auto;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.address-item-mid-row {
							width: auto;
							height: 30px;
							line-height: 30px;

							.address-item-name {
								width: auto;
								height: 30px;
								float: left;
								line-height: 30px;
								font-size: 14px;
								font-weight: bold;
							}

							.address-item-phone {
								width: auto;
								height: 30px;
								float: left;
								line-height: 30px;
								font-size: 14px;
								padding-left: 15px;
							}
						}

						.address-item-bottom-row {
							width: auto;
							height: 30px;
							line-height: 30px;
							color: #999999;
							font-size: 12px;

							.address-item-info-text {
								width: auto;
								float: left;
							}

							.address-item-info-detail {
								width: auto;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

					}

					.address-item-right-content {
						width: auto;
						height: 60px;
						float: right;

						.icon-box {
							width: auto;
							height: 60px;
							float: right;
							box-sizing: border-box;
							padding: 0 0px 0px 0px;

							.del-box {
								width: 100%;
								height: 45px;
								line-height: 45px;

								.icon-del {
									line-height: 45px;
								}
							}

							.edit-box {
								width: 100%;
								height: 45px;

								.icon-edit {
									margin-top: 10px;
									width: 24px;
									height: 24px;
								}
							}

						}
					}

				}
			}

			.address-box:last-child {
				margin-bottom: 100px;
			}


		}

	}

	.address-btn-box {
		width: 100%;
		height: 80px;
		background: #fff;
		box-sizing: border-box;
		padding: 20px 15px;
		position: fixed;
		bottom: 0px;
		box-shadow: 0px 0px 4px 0px #d3d3d3;

		.address-btn {
			width: 100%;
			height: 40px;
			font-size: 14px;
			background: #ff2d2de2;
			color: #fff;
			border-radius: 4px;
			line-height: 40px;
			text-align: center;
		}
	}
</style>